<template>
    <div class="register">
        <div class="registerLogo">
            <img src="../assets/img/logo.jpg" />
        </div>
        <div class="registerCon">
            <div class="tregisterTab">
                <ul>
                    <li :class="nextStep == 1 ? 'active' : '' ">
                        <div><span>1</span>个人信息</div><img src="../assets/img/register1.jpg" /><img class="on" src="../assets/img/register03.jpg" /></li>
                    <li :class="nextStep == 2 ? 'active' : '' ">
                        <div><span>2</span>公司信息</div><img src="../assets/img/register2.jpg" /><img class="on" src="../assets/img/register02.jpg" /></li>
                    <li :class="nextStep == 3 ? 'active' : '' ">
                        <div><span>3</span>申请审核</div><img src="../assets/img/register3.jpg" /><img class="on" src="../assets/img/register01.jpg" /></li>
                </ul>
            </div>
            <el-form v-if="nextStep == 1" :model="ruleForm" :rules="rules" ref="ruleForm" class="demo-ruleForm" label-width="160px" style="margin-top: 180px;">
                <el-form-item label="登录账号" prop="accountNumber">
                    <el-input v-model="ruleForm.accountNumber"></el-input>
                </el-form-item>
                <el-form-item label="密码" prop="password">
                    <el-input v-model="ruleForm.password"></el-input>
                </el-form-item>
                <el-form-item label="确认密码" prop="confirmPassword">
                    <el-input v-model="ruleForm.confirmPassword"></el-input>
                </el-form-item>
                <el-form-item label="手机号" prop="phone">
                    <el-input v-model="ruleForm.phone"></el-input>
                </el-form-item>
                <el-form-item label="验证码" prop="code">
                    <el-input v-model="ruleForm.code"></el-input>
                </el-form-item>
                <el-form-item>
                    <div class="login-btn">
                        <el-button type="primary" @click="submitForm('ruleForm')">下一步</el-button>
                    </div>
                </el-form-item>
            </el-form>
            <el-form v-else-if="nextStep == 2" :model="ruleForm" :rules="rules" ref="ruleForm" class="demo-ruleForm" label-width="160px" style="margin-top: 180px;">
                <el-form-item label="公司名称" prop="companyName">
                    <el-input v-model="ruleForm.companyName"></el-input>
                </el-form-item>
                <el-form-item label="公司类型" prop="companyType">
                    <el-select v-model="ruleForm.companyType" placeholder="请选择">
                    <el-option label="区域一" value="shanghai"></el-option>
                    <el-option label="区域二" value="beijing"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="行业" prop="industry">
                    <el-select v-model="ruleForm.industry" placeholder="请选择">
                    <el-option label="区域一" value="shanghai"></el-option>
                    <el-option label="区域二" value="beijing"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="联系人姓名" prop="contactsName">
                    <el-input v-model="ruleForm.contactsName"></el-input>
                </el-form-item>
                <el-form-item label="联系人身份证号" prop="contactsId">
                    <el-input v-model="ruleForm.contactsId"></el-input>
                </el-form-item>
                <el-form-item class="contactsPic" label="联系人身份证正反面" prop="contactsPic">
                    <el-input v-model="ruleForm.contactsPic"></el-input>
                    <el-upload action="#" :on-change="handleChangeFile" list-type="picture-card"
                    :auto-upload="false" :multiple="false" :limit="1" ref="uploadImage">
                        <template #default>
                            <i class="el-icon-picture-outline"></i>
                        </template>
                        <template #file="{ file }">
                            <div>
                                <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
                                <span class="el-upload-list__item-actions">
                                    <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleRemove(file)">
                                        <i class="el-icon-delete"></i>
                                    </span>
                                </span>
                            </div>
                        </template>
                    </el-upload>
                    <b>（支持JPG、PNG、PDF格式的文件，且大小不超过2M）</b>
                </el-form-item>
                <el-form-item label="法人姓名" prop="legalPersonName">
                    <el-input v-model="ruleForm.legalPersonName"></el-input>
                </el-form-item>
                <el-form-item label="法人身份证号" prop="legalPersonId">
                    <el-input v-model="ruleForm.legalPersonId"></el-input>
                </el-form-item>
                <el-form-item class="contactsPic" label="法人身份证正反面" prop="legalPersonPic">
                    <el-input v-model="ruleForm.legalPersonPic"></el-input>
                    <el-upload action="#" :on-change="handleChangeFile" list-type="picture-card"
                    :auto-upload="false" :multiple="false" :limit="1" ref="uploadImage">
                        <template #default>
                            <i class="el-icon-picture-outline"></i>
                        </template>
                        <template #file="{ file }">
                            <div>
                                <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
                                <span class="el-upload-list__item-actions">
                                    <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleRemove(file)">
                                        <i class="el-icon-delete"></i>
                                    </span>
                                </span>
                            </div>
                        </template>
                    </el-upload>
                    <b>（支持JPG、PNG、PDF格式的文件，且大小不超过2M）</b>
                </el-form-item>
                <el-form-item label="社会统一信用代码" prop="creditCode">
                    <el-input v-model="ruleForm.creditCode"></el-input>
                </el-form-item>
                <el-form-item class="contactsPic" label="上传营业执照" prop="businessLicense">
                    <el-input v-model="ruleForm.businessLicense"></el-input>
                    <el-upload action="#" :on-change="handleChangeFile" list-type="picture-card"
                    :auto-upload="false" accept="image/png,image/jpeg,application/pdf" :multiple="false" :limit="1" ref="uploadImage">
                        <template #default>
                            <i class="el-icon-picture-outline"></i>
                        </template>
                        <template #file="{ file }">
                            <div>
                                <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
                                <span class="el-upload-list__item-actions">
                                    <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleRemove(file)">
                                        <i class="el-icon-delete"></i>
                                    </span>
                                </span>
                            </div>
                        </template>
                    </el-upload>
                    <b>（支持JPG、PNG、PDF格式的文件，且大小不超过2M）</b>
                </el-form-item>
                <el-form-item class="contactsPic" label="上传合同" prop="contract">
                    <el-input v-model="ruleForm.contract"></el-input>
                    <el-upload action="#" :on-change="handleChangeFile" list-type="picture-card"
                    :auto-upload="false" :multiple="false" :limit="1" ref="uploadImage">
                        <template #default>
                            <i class="el-icon-picture-outline"></i>
                        </template>
                        <template #file="{ file }">
                            <div>
                                <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
                                <span class="el-upload-list__item-actions">
                                    <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleRemove(file)">
                                        <i class="el-icon-delete"></i>
                                    </span>
                                </span>
                            </div>
                        </template>
                    </el-upload>
                    <b>（支持JPG、PNG、PDF格式的文件，且大小不超过2M）</b>
                </el-form-item>
                <el-form-item class="contactsPic" label="资质附件" prop="Qualification">
                    <el-input v-model="ruleForm.Qualification"></el-input>
                    <el-upload action="#" :on-change="handleChangeFile" list-type="picture-card"
                    :auto-upload="false" :multiple="false" :limit="1" ref="uploadImage">
                        <template #default>
                            <i class="el-icon-picture-outline"></i>
                        </template>
                        <template #file="{ file }">
                            <div>
                                <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
                                <span class="el-upload-list__item-actions">
                                    <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleRemove(file)">
                                        <i class="el-icon-delete"></i>
                                    </span>
                                </span>
                            </div>
                        </template>
                    </el-upload>
                    <b>（支持JPG、PNG、PDF格式的文件，且大小不超过2M）</b>
                </el-form-item>
                <el-form-item>
                    <div class="login-btn">
                        <el-button type="primary" @click="examine('ruleForm')">申请审核</el-button>
                        <b>
                            <router-link to="/register">审核通过后，您将收到短信通知，请注意相关短信信息</router-link>
                        </b>
                    </div>
                </el-form-item>
            </el-form>
            <div v-else class="examine">
                <img src="../assets/img/register7.jpg" />
                申请已提交，请耐心等待审核哦！
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            nextStep: 1,
            fileData: null,
            ruleForm: {
                accountNumber: '',
                password: '',
                confirmPassword: '',
                phone: '',
                code: '',
                companyName: '',
                companyType: '',
                industry: '',
                contactsName: '',
                contactsId: '',
                legalPersonName: '',
                legalPersonId: '',
                creditCode: '',
                contactsPic: '',
                legalPersonPic: '',
                businessLicense: '',
                contract: '',            
                Qualification: '',
            },
            rules: {
                accountNumber: [
                    { required: true, message: '请输入登录账号', trigger: 'blur' },
                    { min: 3, max: 15, message: '长度在 3 到 15 个字符', trigger: 'blur' }
                ],
                password: [
                    { required: true, message: '请输入密码', trigger: 'blur' },
                    { min: 6, max: 15, message: '长度在 6 到 15 个字符', trigger: 'blur' }
                ],
                confirmPassword: [
                    { required: true, message: '请确认密码', trigger: 'blur' },
                    { min: 6, max: 15, message: '长度在 6 到 15 个字符', trigger: 'blur' }
                ],
                phone: [
                    { required: true, message: '请输入手机号', trigger: 'blur' },
                    { min: 11, max: 11, message: '长度在 11 到 15 个字符', trigger: 'blur' }
                ],
                code: [
                    { required: true, message: '请输入验证码', trigger: 'blur' },
                    { min: 6, max: 6, message: '长度在 6 到 6 个字符', trigger: 'blur' }
                ],
                companyName: [
                    { required: true, message: '请输入公司名称', trigger: 'blur' },
                    { min: 3, max: 15, message: '长度在 3 到 15 个字符', trigger: 'blur' }
                ],
                companyType1: [
                    { required: true, message: '请选择', trigger: 'change' }
                ],
                industry: [
                    { required: true, message: '请选择', trigger: 'change' }
                ],
                contactsName: [
                    { required: true, message: '请输入联系人姓名', trigger: 'blur' },
                    { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
                ],
                contactsId: [
                    { required: true, message: '请输入身份证号', trigger: 'blur' },
                ],
                legalPersonName: [
                    { required: true, message: '请输入法人姓名', trigger: 'blur' },
                    { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
                ],
                legalPersonId: [
                    { required: true, message: '请输入法人身份证号', trigger: 'blur' },
                ],
                creditCode: [
                    { required: true, message: '请输入社会统一信用代码', trigger: 'blur' },
                ],
                contactsPic: [
                    { required: true, message: '请上传联系人身份证正反面', trigger: 'blur' },
                ],
                legalPersonPic: [
                    { required: true, message: '请上传法人身份证正反面', trigger: 'blur' },
                ],
                businessLicense: [
                    { required: true, message: '请上传营业执照', trigger: 'blur' },
                ],
                contract: [
                    { required: true, message: '请上传合同', trigger: 'blur' },
                ],
            }
        }
    },
    created() {
    },
    methods: {
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    console.log('submit!');
                } else {
                    if(this.nextStep == 1){
                        this.nextStep = 2;
                    }
                }
            });
        },
        examine(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    console.log('submit!');
                } else {
                    if(this.nextStep == 2){
                        this.nextStep = 2;
                    }
                }
            });
        },
        handleChangeFile(file) {
            this.fileData = file;
        },
        handleRemove() {
            this.$refs.uploadImage.clearFiles();
        },
    }
};
</script>
<style scoped>
html, body {
    overflow: inherit;
}
.register {
    width: 100%;
    background: #EEF4FB;
    float: left;
    height: 100%;
    overflow-y: scroll;
}
.registerLogo {
    margin: 30px 0 30px 10%;
    font-size: 28px;
    color: #526182;
}
.registerCon{
    width: 80%;
    float: left;
    margin: 0 10% 50px;
    background: #fff;
    box-shadow: 0px 4px 6px 0px #E1EFFF;
    border-radius: 10px;
}
.login-btn {
    text-align: center;
    margin: 100px 0 50px -90px;
}
.login-btn button {
    width: 220px;
    height: 40px;
}
.login-btn b {
    font-size: 12px;
    color: #95A8BE;
    display: block;
    text-align: center;
    margin-top: 10px;
    font-weight: normal;
    line-height: 1;
    height: 12px;
}
.login-btn a {
    color: #326CF0;
}
.tregisterTab {
    margin: 40px 5% 70px;
}
.tregisterTab ul li {
    float: left;
    width: 33.33%;
    text-align: center;
    font-size: 18px;
    color: #95A8BE;
    line-height: 70px;
    height: 70px;
    position: relative;
    overflow: hidden;
}
.tregisterTab ul li > div {
    position: relative;
    z-index: 11;
}
.tregisterTab ul li img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 70px;
}
.tregisterTab ul li img.on {
    display: none;
}
.tregisterTab ul li.active img.on {
    display: block;
}
.tregisterTab ul li.active {
    color: #fff;
}
.tregisterTab ul li span {
    width: 30px;
    height: 30px;
    background: #B9C7D6;
    text-align: center;
    border-radius: 100%;
    display: inline-block;
    line-height: 30px;
    margin-right: 20px;
}
.tregisterTab ul li.active span {
    color: #326CF0;
    background: #fff;
}
</style>

